<template>
    <div>
        <echartsLayout :formState="false" :tableState="false">
            <div slot="form">
                <el-form :model="form" ref="form" label-width="70px" label-position="right" >
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="科目" prop="subjectId">
                                <el-select v-model="form.subjectId" placeholder="请选择科目" style="width:100%">
                                    <el-option
                                        v-for="item in subjectList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="时间范围" prop="timeId" >
                                <el-select v-model="form.timeId" placeholder="请选择时间范围" style="width:100%">
                                    <el-option
                                        v-for="item in timeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                             <div class="btn-query">
                                <el-button type="primary" class="btn-common">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div>
            <!--表格 start-->
            <div slot="table">
                <div class="table-title">
                    <el-button @click="exportExcel" class="btn-common">导出</el-button>
                </div> 
                <el-table :data="dateList" border v-loading="loading" style="width: 100%">
                    <el-table-column label="布置人数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.arrangementPerson | isNull}}</span>
                        </template>
                    </el-table-column>

                     <el-table-column label="布置次数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.arrangementCount | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="练习次数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.exciseCount | isNull}}</span>
                        </template>
                    </el-table-column>

                      <el-table-column label="正确率" align="center">
                        <template scope="scope">
                            <span>{{scope.row.accuracy | isNull}}</span>
                        </template>
                    </el-table-column>


                    <el-table-column label="章节" align="center">
                        <template scope="scope">
                            <span>{{scope.row.unitName | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="科目" align="center">
                        <template scope="scope">
                            <span>{{scope.row.subjectName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="教材" align="center">
                        <template scope="scope">
                            <span>{{scope.row.bookName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="年级" align="center">
                        <template scope="scope">
                            <span>{{scope.row.grade | isNull}}</span>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!--表格 end-->
        </echartsLayout>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import echartsLayout from 'components/TableLayout/echartsLayout'; 
export default {
    name: 'chapterExerciseList',
    components: {echartsLayout},
    data() {
        return {
            subjectList: [
                {
                    id: 1,
                    name: '语文'
                },
                {
                    id: 2,
                    name: '数学'
                }
            ],
            timeList: [
                {
                    id: 0,
                    name: '本月'
                },
                {
                    id: 1,
                    name: '三个月'
                }, 
                {
                    id: 2,
                    name: '半年内'
                },
                {
                    id: 3,
                    name: '本年'
                }
                
            ],
            form: {
                subjectId: '', // 科目
                timeId: 0 // 时间范围
            },
            dateList: [
                {
                    id: 0,
                    arrangementPerson: 51254,
                    arrangementCount: 1588755,
                    exciseCount: 1000,
                    accuracy: '54.14%',
                    unitName: '啊哈哈哈',
                    subjectId: 122,
                    subjectName: '语文',
                    bookName: '人民教育出版社（标准版）',
                    grade: '六年级'
                }
            ],
            pageQuery: {
                total: 0,
                currentpage: 1

            },
            loading: false // 表格加载,默认要为true
            
        }
    }, 
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },

        
        // 查询
        queryData() {
            console.log(111111111);
            // abc().then(res => {
            //     this.dateList = res.data.content;
            // })

        },
        // 导出
        exportExcel() {
            console.log(111111111);
            // window.location.href = `${LOCAL_API.yy}/incrementCard/exportCardCoupons?provinceId=${this.query.provinceId}&cityId=${this.query.cityId}&areaId=${this.query.areaId}&startDate=${start}&endDate=${end}&token=${token}`;        

        }
    }
}
</script>

<style lang="scss" scoped>
.btn-query{
    float:right;
}
</style>